<!DOCTYPE html>
<!--
作者：739558011@qq.com
时间：2014-08-06
描述：放大镜

实现思路：
当鼠标按下和移动时，将div定位到鼠标按下出，并使div可见，
当移动鼠标时改变div大小
-->
<%    
	String path = request.getContextPath();    
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";    
	pageContext.setAttribute("basePath",basePath);    
%>    
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="${basePath}/resources/jquery-1.8.3.min.js"></script>
		<style>
			#magnifier_div {
				position: absolute;
				border: 3px solid #990033;
				cursor: crosshair;
				display: none;
				width: 120px;
				height: 80px;
			}

			#controls {
				margin: 20px 0px 20px 20px;
			}
		</style>
		<script type="text/javascript">
			

			$(function() {
				var cvs = $("#mycanvas")[0], 
				ctx = cvs.getContext("2d"),
				magnifierDiv = $("#magnifier_div"), 
				image = new Image();
				image.src = "${basePath}/images/girl.jpg";
				var picCvs = $("#picCanvas")[0],
				picCtx = picCvs.getContext("2d");
				image.onload= function(){
					ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
				}
				
				window.addEventListener("mousemove",function(e){
				    moveDiv(e,cvs,magnifierDiv,picCtx,picCvs,image);
				})
			})
			
			function moveDiv(e,cvs,magnifierDiv,picCtx,picCvs,image){
			    var bbox = cvs.getBoundingClientRect();
			    var left = bbox.left,
			    top = bbox.top,
			    x = e.clientX,
			    y = e.clientY;
			    if(x<left+cvs.width
			        &&x>left
			    	&&y<top+cvs.height
			    	&&y>top){
			    	var marginLeft = x+left-magnifierDiv.width()/2,
				    marginTop = y+top-magnifierDiv.height()/2;
				    marginLeft=marginLeft<left?left:marginLeft;
				    marginLeft=marginLeft>left+cvs.width-magnifierDiv.width()?left+cvs.width-magnifierDiv.width():marginLeft;
				    marginLeft=marginLeft
				    marginTop=marginTop<top?top:marginTop;
				    marginTop=marginTop>top+cvs.height-magnifierDiv.height()?top+cvs.height-magnifierDiv.height():marginTop;
				    marginTop=marginTop;
				    magnifierDiv.attr("style","left:"+marginLeft+"px;top:"+marginTop+"px;display: block;");
					picCtx.clearRect(0,0,picCvs.width,picCvs.height);
			    	picCtx.drawImage(cvs, marginLeft,marginTop,magnifierDiv.width(),magnifierDiv.height()
			    	,0,0,picCvs.width,picCvs.height);
			    }
			   
			}
		</script>

	</head>
	<body>
		<canvas id="mycanvas" width="400" height="400" style="border:1px solid #c3c3c3;position: absolute;" >
			还在用土鳖ie?赶紧换吧，分分钟炫起来！
		</canvas>
		<canvas id="picCanvas" width="480"  height="360" style="border:1px solid #c3c3c3;position: absolute;left: 420px;"></canvas>
		<div id="magnifier_div">

		</div>
	</body>
</html>
